<template>
  <a-spin :spinning="loading">
    <a-card :bordered="false">
      <detail-list title="会员信息">
        <detail-list-item term="注册门店">{{ model.shopName }}</detail-list-item>
        <detail-list-item term="手机号">{{ model.mobile }}</detail-list-item>
        <detail-list-item term="姓名">{{ model.realName ? model.realName : '-' }}</detail-list-item>
        <detail-list-item term="注册时间">{{ model.regTime }}</detail-list-item>
        <detail-list-item term="性别">{{ model.sex ? model.sex : '-' }}</detail-list-item>
        <detail-list-item term="生日">{{ model.birth ? model.birth : '-' }}</detail-list-item>
        <detail-list-item term="注册渠道">{{ model.regSource }}</detail-list-item>
        <detail-list-item term="备注">{{ model.remark }}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px" />
      <detail-list title="微信会员">
        <detail-list-item term="微信头像">
          <a-avatar shape="square" :src="model.logo"> </a-avatar>
        </detail-list-item>
        <detail-list-item term="微信昵称">{{ model.nickName ? model.nickName : '-' }}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px" />
      <detail-list title="消费信息">
        <detail-list-item term="最近消费">
          {{ model.recentConsumptionTime ? model.recentConsumptionTime : '-' }}
        </detail-list-item>
        <detail-list-item term="消费次数">
          {{ model.orderCnt ? model.orderCnt : '0' }}
        </detail-list-item>
        <detail-list-item term="可用积分"> {{ model.pointsBalance }} </detail-list-item>
      </detail-list>
    </a-card>
    <!-- 明细 -->
    <a-card
      style="margin-top: -15px"
      :bordered="false"
      :tabList="tabList"
      :activeTabKey="activeTabKey"
      @tabChange="
        (key) => {
          this.activeTabKey = key
        }
      "
    >
    <PosMemberOrderlist v-if="activeTabKey === '1' && model.id" :memberId="model.id" @ok="calcCnt"></PosMemberOrderlist>
    <PosMemberRefundlist v-if="activeTabKey === '2' && model.id" :memberId="model.id"></PosMemberRefundlist>
    <PosMemberPointslist v-if="activeTabKey === '3' && model.id" :memberId="model.id"></PosMemberPointslist>
    <PosMemberCouponlist v-if="activeTabKey === '4' && model.id" :memberId="model.id"></PosMemberCouponlist>
    </a-card>
  </a-spin>
</template>

<script>
import PageLayout from '@/components/page/PageLayout'
import STable from '@/components/table/'
import DetailList from '@/components/tools/DetailList'
import ABadge from 'ant-design-vue/es/badge/Badge'
import { postAction } from '@/api/manage'
import PosMemberOrderlist from './PosMemberOrderList'
import PosMemberRefundlist from './PosMemberRefundList'
import PosMemberPointslist from './PosMemberPointsList'
import PosMemberCouponlist from './PosMemberCouponList'
const DetailListItem = DetailList.Item

export default {
  components: {
    PageLayout,
    ABadge,
    DetailList,
    DetailListItem,
    STable,

    PosMemberOrderlist,
    PosMemberRefundlist,
    PosMemberPointslist,
    PosMemberCouponlist,
  },
  name: 'PosShopMemberModal',
  data() {
    return {
      title: '操作',
      params: {},
      model: {},
      loading: false,
      tabList: [
        {
          key: '1',
          tab: '订单记录',
        },
        {
          key: '2',
          tab: '退单记录',
        },
        {
          key: '3',
          tab: '积分明细',
        },
        {
          key: '4',
          tab: '优惠券明细',
        },
      ],
      confirmLoading: false,
      activeTabKey: '1',
      validatorRules: {},
      url: {
        detail: '/member/posShopMember/detail',
      },
    }
  },
  created() {},
  activated() {
    this.model = this.$route.params
    console.log('===model===', this.model)
    if(this.model && this.model.id){
      this.activeTabKey = '1'
      this.detail()
    }
  },
  methods: {
    detail() {
      this.loading = true
      postAction(this.url.detail + '/' + this.model.id, this.params).then((res) => {
        if (res.success) {
          this.model = Object.assign({}, this.model, res.result)
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => (this.loading = false))
    },
    calcCnt(val){
      console.log('===val===', val)
      this.$set(this.model,'orderCnt' , val.orderCnt)
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>